<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<body>
<div class="layui-container" style="width: 960px;height: 600px;margin-top: 0px;padding-top: 60px;">

    <div style="margin-left: 460px; width: 300px;">
        <a href="/account/redirect/index">首页</a>&nbsp;&nbsp;|&nbsp;&nbsp;欢迎回来！
        <input id="userid" th:value="${session.user.id}" style="display: none">
        <a href="/account/redirect/order" th:text="${session.user.nickname}"></a>
        <a href="/account/logout">&nbsp;&nbsp;&nbsp;
            <button class="layui-btn layui-btn-warm layui-btn-radius">退出</button></a>
    </div>

    <table class="layui-hide" id="test" lay-filter="test"></table>
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <script th:src="@{/js/jquery-3.3.1.min.js}" charset="utf-8"></script>
    <script>
        layui.use('table', function(){
            var table = layui.table;
var id = $("#userid").val()
            console.log(id)
            table.render({
                elem: '#test'
                ,url:'/order/findAllByUid?uid='+id
                ,title: '订单列表'
                ,cols: [
                    [
                        {field:'id', width:100, title: '编号', sort: true}
                        , {
                        field: 'name', width: 170, title: '菜品', templet: function (data) {
                                return data.menu.name
                            }
                        }
                        , {
                        field: 'price', width: 100, title: '单价', templet: function (data) {
                                return data.menu.price
                            }
                        }
                        ,{field:'flavor', width:100, title: '口味',templet:function(data){
                                return data.menu.flavor
                            }
                        }
                        ,{field:'date',width:200,  title: '下单时间'}
                        ,{field:'state', width:160, title: '订单状态',templet:function(data){
                                var result = "";
                                switch (data.state) {
                                    case 0:
                                        result = "未派送";
                                        break;
                                    case 1:
                                        result = "已派送";
                                        break;
                                    case 2:
                                        result = "待支付";
                                        break;
                                }
                                return result
                            }
                        },
                        {
                            title: '操作', width: 100, templet: function (data) {
                               if(data.state == 2){
                                   return '<button class="layui-btn layui-btn-xs" lay-event="order">支付</button>';
                               }else {
                                   return ""
                               }
                            }
                        }
                    ]
                ],
                page: true
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;

                console.log(obj.event)
                if(obj.event === 'order'){
                    window.location.href= "/order/pay?tradeNo="+data.id+"&subject=订单支付&totalAmount="+ data.menu.price;
                }
            });
        });
    </script>

</div>
<script>
    //二级菜单联动
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</html>